﻿@page "/tooltip/default"

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Popups
@using MSComponents = Microsoft.AspNetCore.Components
@inherits SampleBaseComponent;
@using Syncfusion

<SampleDescription>
    <p>This sample demonstrates the default functionalities of the Tooltip which will open by Hover or Touch-hold action on button and will be displayed in 12 different positions.</p>
</SampleDescription>
<ActionDescription>
   <p> This sample illustrates a Tooltip, that gets opened on hovering the target labelled “Show Tooltip”. The Tooltip can be shown on 12 possible positions, by selecting the appropriate position values provided in the Dropdown. The applicable Tooltip positions are as follows:</p>
      <ul>
         <li><code>TopLeft</code></li>
         <li><code>TopCenter</code></li>
         <li><code>TopRight</code></li>
         <li><code>BottomLeft</code></li>
         <li><code>BottomCenter</code></li>
         <li><code>BottomRight</code></li>
         <li><code>LeftTop</code></li>
         <li><code>LeftCenter</code></li>
         <li><code>LeftBottom</code></li>
         <li><code>RightTop</code></li>
         <li><code>RightCenter</code></li>
         <li><code>RightBottom</code></li>
     </ul>
 <p>In case, if the Tooltip needs to be opened on mobile devices, tap hold on the target labelled “Show Tooltip” instead of hovering, and by default it closes after 1.5 seconds on lift.</p>
</ActionDescription>

<div class="col-lg-8 control-section sb-property-border">
    <div class="control-section">
        <!-- Tooltip element -->
        <SfTooltip HtmlAttributes="HtmlAttribute" Position="@Position" ShowTipPointer="true">
            <TooltipTemplates>
                <Content>
                    Lets go green & Save Earth !!
                </Content>
            </TooltipTemplates>
            <SfButton Content="Show Tooltip"></SfButton>
        </SfTooltip>
    </div>
</div>
<div class="col-lg-4 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div><div class="property-panel-content">
            <table id="property" title="Properties" class="property-panel-table">
                <tbody>
                    <tr>
                        <td style="width: 30%">
                            <div>Position:</div>
                        </td>
                        <td style="width: 70%;padding-right: 10px">
                            <div>
                                <select class="form-control" style="height: 32px;" @onchange="@((e) => { SelectItems(e); })">
                                    <option value="TopLeft">Top Left</option>
                                    <option value="TopCenter">Top Center</option>
                                    <option value="TopRight">Top Right</option>
                                    <option value="BottomLeft">Bottom Left</option>
                                    <option value="BottomCenter">Bottom Center</option>
                                    <option value="BottomRight">Bottom Right</option>
                                    <option value="LeftTop">Left Top</option>
                                    <option value="LeftCenter">Left Center</option>
                                    <option value="LeftBottom">Left Bottom</option>
                                    <option value="RightTop">Right Top</option>
                                    <option value="RightCenter">Right Center</option>
                                    <option value="RightBottom">Right Bottom</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@code{
    Syncfusion.Blazor.Popups.Position Position, LoopPos;
    void SelectItems(MSComponents.ChangeEventArgs e)
    {
        Syncfusion.Blazor.Popups.Position selectedPos = (Syncfusion.Blazor.Popups.Position)Enum.Parse(typeof(Syncfusion.Blazor.Popups.Position), e.Value.ToString());
        foreach (Syncfusion.Blazor.Popups.Position pos in Enum.GetValues(typeof(Syncfusion.Blazor.Popups.Position)))
        {
            LoopPos = (Syncfusion.Blazor.Popups.Position)Enum.Parse(typeof(Syncfusion.Blazor.Popups.Position), pos.ToString());
            if (selectedPos == LoopPos)
            {
                Position = pos;
            }
        }
    }
    protected override void OnInitialized()
    {
        base.OnInitialized();
        Position = Syncfusion.Blazor.Popups.Position.TopLeft;
    }
    Dictionary<string, object> HtmlAttribute = new Dictionary<string, object>()
    {
        {"class", "tooltip_style" }
    };

}
<style>
    .tooltip_style {
        position: absolute;
        left: calc( 50% - 60px);
        top: 38%;
    }
</style>
